<!-- 自动巡检 日志 -->
<template>
	<el-card shadow="hover">
		<el-row>
			<el-form :inline="true" :model="data.queryParams" class="demo-form-inline">
				<orgSelect v-if="data.taskSelectOption.length" @do-search="mergeSearchData" :show-build="true" :show-util="true" />

				<el-form-item label="任务">
					<el-select v-model="data.queryParams.taskId" placeholder="状态" @change="fetch" style="width: 150px">
						<el-option v-for="item in data.taskSelectOption" :label="item" :value="item" :key="item" />
					</el-select>
				</el-form-item>

				<el-form-item label="巡检次数">
					<el-select v-model="data.queryParams.checkTimes" placeholder="巡检次数" style="width: 150px">
						<el-option label="全部" :value="10000" />
						<el-option label="未开始" :value="0" />
						<el-option label="1次" :value="1" />
						<el-option label="2次" :value="2" />
						<el-option label="3次" :value="3" />
					</el-select>
				</el-form-item>

				<el-form-item label="状态">
					<el-select v-model="data.queryParams.isFinish" placeholder="状态" style="width: 150px">
						<el-option label="全部" :value="0" />
						<el-option label="成功" :value="1" />
						<el-option label="失败" :value="2" />
					</el-select>
				</el-form-item>

				<el-form-item label="">
					<el-button type="primary" @click="search" size="default"> 查询 </el-button>
				</el-form-item>

				<el-form-item label="">
					<el-button type="primary" @click="fetch" size="success"> 刷新 </el-button>
				</el-form-item>
			</el-form>
		</el-row>

		<!-- 表格数据展示 -->
		<el-table ref="table" v-loading="data.loading" :data="data.tableData.list" :border="true" fit style="width: 100%" height="calc(100vh - 330px)">
			<el-table-column align="center" type="index" width="50px" />
			<el-table-column label="任务" prop="taskId" />
			<el-table-column label="设备编号" prop="deviceCode" />
			<el-table-column label="设备地址" prop="deviceNumber">
				<template #default="{ row }">
					{{ getAddress(row) }}
				</template>
			</el-table-column>
			<el-table-column label="巡检次数" prop="checkTimes" />
			<el-table-column label="设备状态">
				<template #default="{ row }">
					<el-space>
						<el-tag v-if="row.offLine" type="danger" size="small" plain :title="row.lastUploadTime"> 离线 </el-tag>
						<el-tag v-else type="success" size="small" plain> 在线 </el-tag>
					</el-space>
				</template>
			</el-table-column>

			<el-table-column label="结果">
				<template #default="{ row }">
					<el-image
						v-if="row.url"
						class="alarmImg"
						:src="getFileUrl(row.url)"
						:preview-src-list="[getFileUrl(row.url)]"
						:initial-index="0"
						fit="cover"
						:preview-teleported="true"
						:zoom-rate="1.2"
						:max-scale="3"
						:min-scale="0.2"
					/>
					<template v-else>
						{{ row.checkTimes == 3 ? '巡检失败' : '等待巡检' }}
					</template>
				</template>
			</el-table-column>
			<el-table-column label="手动重试">
				<template #default="{ row }">
					<el-button v-if="!row.offLine && !row.url" type="primary" size="small" @click="wsGetTaskImg(row)"> 重试 </el-button>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" prop="updatedAt" />
		</el-table>

		<!-- 查看日志对话框 -->

		<!-- 分页 -->
		<pagination :total="data.tableData.total" v-model:page="data.queryParams.pageNum" v-model:limit="data.queryParams.pageSize" @pagination="fetch" />
	</el-card>
</template>

<script lang="ts" setup name="AutoCheckList">
import { reactive, onMounted, ref, watch, onUpdated } from 'vue';
import autoCheckApi from '/@/api/smoke/autoCheck';
import { useSmoke } from '/@/hook/index';
import { smokeStore } from '/@/stores/smoke';
import orgSelect from '/@/components/smoke/orgSelect/index.vue';

const { getAddress, getFileUrl, isOffline } = useSmoke();
const data = reactive({
	queryParams: {
		taskId: '',
		checkTimes: 10000,
		isFinish: 0, // 0：全部 1：成功 2：失败
		pageNum: 1,
		pageSize: 10,
	},
	loading: false,
	tableData: {
		list: <any>[],
		total: 0,
	},
	taskSelectOption: [],
});

onMounted(() => {
	getTaskSelectOption();
	// fetch();
});

function getTaskSelectOption() {
	autoCheckApi.taskSelect().then((res: any) => {
		data.taskSelectOption = res.data.list;
		data.queryParams.taskId = res.data.list[0];
		fetch();
	});
}

function search() {
	data.queryParams.pageNum = 1;
	fetch();
}

// 获取列表页数据
function fetch(params?: any) {
	data.loading = true;
	autoCheckApi
		.logPage(data.queryParams)
		.then((res: any) => {
			res.data.list.forEach((item: any) => {
				item.offLine = isOffline(item.lastUploadTime);
			});
			data.tableData = res.data;
			data.loading = false;
		})
		.finally(() => (data.loading = false));
}

function mergeSearchData(xqData: any) {
	const { ids, dept, communityId, buildNum, utilNum, communityIds } = xqData;
	Object.assign(data.queryParams, { ids, communityId, buildNum, utilNum, communityIds });
	search();
}

// 查看图片
async function wsGetTaskImg(row: any) {
	// state.imgUrl = '';
	let wsConn = smokeStore().wsConn;
	let params = {
		cmdType: 'getTaskImg',
		deviceCode: row.deviceCode,
		data: {
			taskId: row.taskId,
		},
	};
	wsConn.send(JSON.stringify(params));
}
</script>
<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
	margin-right: 10px;
}

.alarmImg {
	height: 50px;
}
</style>
